<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 设置浏览器兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 设置视口属性以适应不同设备的屏幕尺寸 -->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>首页</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/media.css"/>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/search.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/lunbo.css"/>
<script src="js/lunbo.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index_donghua.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index_huadong.js" type="text/javascript" charset="utf-8"></script>


<style>
	/* 添加缩放动画效果 */
	.scale-in {
		animation: scale-in 3s ease-in-out forwards;
	}

	@keyframes scale-in {
		from {
			transform: scale(0);
			opacity: 0;
		}
		to {
			transform: scale(1);
			opacity: 1;
		}
	}

	      /* 添加旋转动画效果 */
 

		  .rotating-image {
            transition: transform 0.5s ease-in-out;
            display: block;
        }
		 /* 添加文字滑动动画效果 */
		 .jump-animation {
            animation: jump 3s ease-out;
        }

        @keyframes jump {
            0% { transform: translateX(-100%) translateY(0); opacity: 0; }
           
            100% { transform: translateX(0) translateY(0); opacity: 1; }
        }

        .jump-text {
            display: inline-block;
        }
		.h3{
			font-size: 24px !important;
			text-align: center;

 
    font-weight: bold;
    color: #555555;
		}
</style>
</head>
<body>
<!--头部-->
<header class="header">
	<div class="top hidden-sm hidden-xs ">
		<div class="container">
			<!-- <div class="pull-left">探索敦煌文化，千年文化之旅的起点。</div> -->
			
			<div class="pull-right">
			<form action="#" method="get" class="fl">
				<input type="text" placeholder="热门搜索：洞窟" />
				<input class="sou_colour" type="button" value="" onclick="searchAndScroll()" />	
			</form>
			</div>
		</div>
	</div>
		
	<div class="logo_box">
		<div class=" container">
			<div class="logo pull-left">
				<img src="images/logo.png" alt="" height="60"  />
			</div>
			 <!-- 导航折叠按钮 -->
			<button	class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>

			<div class="nav_box collapse navbar-collapse pull-right">
				<ul class="nav navbar-nav" id="nav_sj">
					<li><a class="acitve" href="index.html">首页</a></li>
					<li><a href="wenchuang.html">文创</a></li>
					<li><a href="exhibition.html">展览</a></li>
					<li><a href="dongku.html">洞窟</a></li>
					<li><a href="bihua.html">壁画</a></li>
					<li><a href="login.html">登录</a></li>
					<li><a href="register.html">注册</a></li>
					<li class="tel"><a href="message.html">留言板</a></li>
				</ul>
			</div>
		</div>
	</div>
</header>




  <!-- 轮播图 -->
  <section class="banner">
	<div id="container">
		<div id="viewwrap">
			<div id="imgs">
				<a>
					<img src="images/lunbo_2.jpg" alt="" class="img-responsive" />
				</a>
				<a>
					<img src="images/lunbo_4.jpg" alt="" class="img-responsive" />
				</a>
				<a>
					<img src="images/lunbo_1.jpg" alt="" class="img-responsive" />
				</a>
				<a>
					<img src="images/lunbo_3.jpg" alt="" class="img-responsive" />
				</a>
			</div>
			<i class="imgicon icon_l"></i>
			<i class="imgicon icon_r"></i>
			<div id="numwrap">
				<i class="num focus" name="0"></i>
				<i class="num" name="1"></i>
				<i class="num" name="2"></i>
				<i class="num" name="3"></i>
			</div>
		</div>
	</div>
</section>

<!--关于敦煌文化-->
<div class="about">
	<div class="container">
		<div class="row">
			<div class="col-md-6 hidden-sm hidden-xs ab_img">
				<img src="images/guanyu.jpg" class="img-responsive"/>
			</div>
			<div class="col-md-6 col-sm-12 col-xs-12 ab_con">
				<h3 id="about-dunhuang"><span>关于</span>敦煌文化</h3>
				<p>敦煌文化以莫高窟的佛教艺术和藏经洞的文物为代表，历史悠久，延续了近2000年。它是中国本土文化与印度、希腊、波斯等外来文化交融的成果，堪称世界文明宝库中的璀璨瑰宝。</p>
				<p>20世纪初，敦煌莫高窟藏经洞的文物流失海外，引发了全球学者对敦煌石窟和文献的深入研究。敦煌学因此成为国际汉学的重要学科，敦煌研究院也成为全球敦煌学研究的核心机构。
加强敦煌学的国际学术交流与合作，不仅对研究中国古代历史文化和东西方文明的互动具有重要意义，也为推动当代全球文化交流提供了宝贵的启示。</p>
				
			</div>
		</div>
	</div>
</div>

<!--主要遗迹-->
<div class="rmtj text-center">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="tit">
					<h3 id="main-sites">主要遗迹</h3>
					<p>莫高窟和三危山</p>
				</div>
			</div>
			<div class="col-md-12">
				<video width="75%" height="40%" controls autoplay muted>
					<source src="images/shiping.mp4" type="video/mp4">
				</video>
			</div>				
		</div>
	</div>
</div>


<!--敦煌著名文化遗产-->
<div class="cpzx text-center">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="tit2">
					<h3 id="cultural-heritage"><span>敦煌著名文化遗产</span></h3>
					<p>莫高窟、敦煌壁画、敦煌飞天</p>
				</div>
			</div>
			<div class="cpzx_con text-center">
				<div class="col-md-4 col-sm-4 col-xs-12">
					<a href="#">
						<dl>
							<dt><img src="images/gy_1.jpg" /></dt>
							<dd>
								<h4>关于敦煌莫高窟?</h4>
								<p>莫高窟是敦煌最著名的石窟之一，位于敦煌市区东南约25公里处。这
些石窟开凿于鸣沙山崖壁上，其中有许多壁画和雕塑，展示了古代中国的宗教文化和社会生活。</p>
							</dd>
						</dl>
					</a>
				</div>
				<div class="col-md-4 col-sm-4 col-xs-12">
					<a href="#">
						<dl>
							<dt><img src="images/gy_2.jpg" /></dt>
							<dd>
								<h4>关于敦煌壁画? </h4>
								<p>
敦煌壁画是敦煌最著名的文化遗产之一，包括莫高窟、西千佛洞、安西榆林窟等多个石窟中的壁画。
这些壁画以精湛的技艺和丰富的文化内涵而闻名于世，是中国古代艺术的瑰宝。</p>
							</dd>
						</dl>
					</a>
				</div>
				<div class="col-md-4 col-sm-4 col-xs-12">
					<a href="#">
						<dl>
							<dt><img src="images/gy_3.jpg" /></dt>
							<dd>
								<h4>关于敦煌飞天?</h4>
								<p>飞天是敦煌壁画中最为精美的形象之一，它们通常被描绘成飘逸的仙女形象。
								在敦煌壁画中，飞天通常被用来表现佛教故事和神话传说。</p>
							</dd>
						</dl>
					</a>
				</div>
			</div>
			
		</div>
	</div>
</div>


                   
<h3 class="h3">敦煌文化的历史沿革</h3>


<div id="app-4">
	<router-view></router-view>
</div>



<!--底部-->
<footer class="footer hidden-xs">
    <div class="line_big container text-center">
      <div id="app-1">
        <div class="col-sm-3 col-md-3">
          <div class="service-box">                
            <rotating-image image-src="images/footer.jpg"></rotating-image>
            <h4>遇见敦煌微信号</h4>
          </div>
        </div>
        <div class="col-sm-3 col-md-3">
          <div class="service-box">            
            <rotating-image image-src="images/footer.jpg"></rotating-image>
            <h4>遇见敦煌微信视频号</h4>
          </div>
        </div>
        <div class="col-sm-3 col-md-3">
          <div class="service-box">            
            <rotating-image image-src="images/footer.jpg"></rotating-image>
            <h4>遇见敦煌微信订阅号</h4>
          </div>
        </div>
        <div class="col-sm-3 col-md-3 ewm">
          <div class="service-box text-left">
            <h3>联系我们</h3>
            <div class="ewm_f">
              <p>电话: 020-38046811</p>
              <p>邮箱: 4679350271@qq.cpm</p>
              <p>网址: www.z-dunhuang.com</p>
              <p>地址: 广东省广州市</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="copy col-md-12">
      <div class="text-center">遇见敦煌版权所有 2024-2025 © Copyright For Dunhuang © www.z-dunhuang.com Tel:(86) 0937-1235488 . 粤ICP备101003344号 </div>
    </div>
  </footer>

 

<!--移动端底部导航-->
<div class="phonefooternav">
    <ul>
        <li>
            <a href="exhibition.html">
               
                <span>展览</span>
            </a>
        </li>
        <li>
            <a href="dongku.html">
             
                <span>洞窟</span>
            </a>
        </li>
        <li>
            <a href="bihua.html">
                
                <span>壁画</span>
            </a>
        </li>
        <li>
            <a href="index.html">
                
                <span>返回首页</span>
            </a>
        </li>
    </ul>
</div>



</body>



<script src="js/jump-vue.js" type="text/javascript" charset="utf-8"></script>


 <!-- 引入新的JavaScript文件 -->
 <script src="js/rotating-vue.js" type="text/javascript" charset="utf-8"></script>

</html>
